<template>
    <view class="w-100vw flex justify-between">
        <view class="w-28 bg-white text-center p-t-20 border-box">
            <view :class="current == index ? 'isActive itemBox':'itemBox'" v-for="(item,index) in cateList" :key="index" @click="clickClassify(index,item)">{{ item.cateName }}</view>
        </view>
        <view class="flex-1 flex flex-wrap p-t-20 border-box">
            <scroll-view type="custom" scroll-y class="scrollBox" @scrolltolower="loadMore">
                <view class="w-100 flex flex-wrap p-l-10 p-r-10 border-box">
                    <view class="boxItem m-b-10" v-for="(item,index) in goodsList" :key="index">
                        <view class="flex w-100 p-b-10 border-box b-r-10 flex-col bg-white boxContent flex-col-center">
                            <view class="imgBox b-r-10" @click="clickToPath(item)">
                                <image class="w-100 h-100" :src="item.mainImageUrl" mode="aspectFit" />
                            </view>
                            <view class="flex w-100 flex-col justify-between border-box p-r-10 p-l-10">
                                <view class="line-2 m-t-10 font-26 font-w-600 text-cut2 line2Box" @click="clickToPath(item)"> {{ item.productName }} </view>
                                <view class="flex" @click="clickToPath(item)">
                                    <view class="color-r"> 
                                        <text class="font-24">￥</text>
                                        <text class="font-b font-30">{{ item.price }}</text>
                                    </view>
                                    <view class="color-g noUse m-l-10 m-t-2" v-if=" item.price != item.productPrice ">
                                        <text class="font-24">￥</text>
                                        <text class="font-b font-24">{{ item.productPrice }}</text>
                                    </view>
                                </view>
                                <view class="flex flex-end m-t-10">
                                    <view class="buy font-24 color-yellow font-24 line-h-40 p-r-10 p-l-10 b-r-10" @click="clickToPath(item)">购买</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="flex flex-col flex-row-center w-100">
                        <empty :show="goodsList.length == 0" />
                        <u-loadmore :status="status" color="#cccccc" class="padding-bottom padding-top-xs"/>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import { getProductList,getProductCate } from '@/common/api/product.js'
export default {
	data() {
		return {
            cateList:[],//分类
            current: 0,
            pageNo: 1,
            goodsList: [],
            cateId: null,
            showIndexFlag: false,
            showLoading: false,
            total: 0,
            status:'loading'
		}
	},
	onShow() {
		this.getCateData()
	},
    onReachBottom() {
        this.pageNo = this.pageNo + 1;
        this.getGoodsList()
    },
	methods: {
        // 获取分类
        getCateData(){
            getProductCate().then(res => {
                if(res.code == 200){
                    this.cateList = res.data
                    this.cateId = res.data[this.current].cateId
                    this.getGoodsList()
                }
            })
        },
        // 获取商品列表
        getGoodsList(){
            this.status = 'loading'
            let data = {
                pageNo: this.pageNo,
                pageSize: 8,
                cateId: this.cateId
            }
            getProductList(data).then(res => {
                if(res.code == 200){
                    let data = []
                    if(this.pageNo == 1){
                        data = res.data
                    }else{
                        data = this.goodsList.concat(res.data)
                    }
                    this.goodsList = data
                    if(this.goodsList.length == res.extend.total){
                        this.status = 'nomore'
                    }
                }
            })
        },
        // 点击分类
        clickClassify(index,data){
            this.current = index
            this.pageNo = 1
            this.cateId = this.cateList[index].cateId
            this.getGoodsList()
        },
        // 跳转设置
        clickToPath(item){
            uni.navigateTo({
                url: '/pages/product/productDetails?productId=' + item.productId
            })
        },
        //页面上拉触底事件的处理函数
        loadMore() {
            if(this.status == 'loading'){
                ++this.pageNo
                this.getGoodsList()
            }
        },
	}
}
</script>

<style lang="scss" scoped>
page{
    background-color: #f3f3f3;
    min-height: 90vh;
    max-height: calc(100vh - 100rpx);
    overflow: hidden;
}
.w-100vw{
    width: 100vw;
}
.w-28{
    width: 28%;
}
.imgBox{
	width: 246rpx;
	height: 240rpx;
	border-radius: 10rpx;
	overflow: hidden;
}
.scrollBox{
	height: 98vh;
}
.buy{
	height: 40rpx;
	border: 2rpx solid #ECA52B;
}
.itemBox{
	padding: 20rpx 0;
	font-size: 30rpx;
}
.isActive{
	background-color: #ECA52B;
	color: #fff;
	font-weight: bold;
}
.boxItem{
	width: calc(50% - 5rpx);
}
.boxItem:nth-child(even){
	padding-left: 10rpx;
	box-sizing: border-box;
}
.boxItem .imgBox{
	padding: 10rpx;
	box-sizing: border-box;
}
.line2Box{
	height: 68rpx;
}
</style>
